<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>友联管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.7/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/layer-v3.5.1/layer/theme/default/layer.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">友链名称：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="searchKeyInput" id="searchKeyInput" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"> 添加友联</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除友联
                </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/layer-v3.5.1/layer/layer.js" charset="utf-8"></script>
<script src="../lib/axios/axios.min.js"></script>
<script src="../lib/vue-module/vue.js"></script>
<script src="../js/main.js"></script>
<script src="../lib/layui-v2.5.7/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        let $ = layui.jquery,
            form = layui.form,
            linksTable = layui.table;
        linksTable.render({
            elem: '#currentTableId',
            url: apiBaseUrl + '/api/blogLink/openApi/listPage',
            toolbar: '#toolbarDemo',
            method: 'POST',
            contentType: 'application/json',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            headers: {
                Authorization: getToken(),
            },
            where: {
                /*接口的其它参数*/
                searchKey: "",
            },
            request: {
                pageName: 'pageNo',/*页码的参数名称，默认：page*/
                limitName: 'pageSize',/*每页数据量的参数名，默认：limit*/
            },
            response: {
                /*请注意，这里处理的是parseData后的json数据，而非接口返回后的数据*/
                statusName: 'code', /*规定数据状态的字段名称，默认：code*/
                statusCode: 200, /*规定成功的状态码，默认：0*/
                msgName: 'msg', /*规定状态信息的字段名称，默认：msg*/
                countName: 'count', /*规定数据总数的字段名称，默认：count*/
                dataName: 'data', /*规定数据列表的字段名称，默认：data*/
            },
            parseData: function (res) {
                /*res 即为原始返回的数据*/
                return {
                    "code": res.code, /*解析接口状态*/
                    "msg": res.message, /*解析提示文本*/
                    "count": res.data.total, /*解析数据长度*/
                    "data": res.data.list /*解析数据列表*/
                };
            },
            cols: [[
                {type: "checkbox", width: 50, fixed: "left"},
                {field: 'id', width: 50, title: 'id'},
                {field: 'linkName', width: 200, title: '友联名', edit: 'text'},
                {field: 'linkHref', width: 300, title: '友联url', edit: 'text'},
                /*{field: 'linkAvatarUrl', width: 150, title: '友联头像url', edit: 'text'},
                {field: 'description', width: 150, title: '描述', edit: 'text'},*/
                {field: 'createTime', width: 200, title: '创建时间'},
                {field: 'updateTime', width: 200, title: '更新时间'},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true
        });

        /*监听搜索操作*/
        form.on('submit(data-search-btn)', function (data) {
            /*let result = JSON.stringify(data.field);*/
            let searchKey = $('#searchKeyInput').val();
            /*执行搜索重载*/
            linksTable.reload('currentTableId', {
                url: apiBaseUrl + '/api/blogLink/openApi/listPage',
                method: 'POST',
                contentType: 'application/json',
                page: {
                    curr: 1
                },
                headers: {
                    Authorization: getToken(),
                },
                request: {
                    pageName: 'pageNo',/*页码的参数名称，默认：page*/
                    limitName: 'pageSize',/*每页数据量的参数名，默认：limit*/
                },
                response: {
                    /*请注意，这里处理的是parseData后的json数据，而非接口返回后的数据*/
                    statusName: 'code', /*规定数据状态的字段名称，默认：code*/
                    statusCode: 200, /*规定成功的状态码，默认：0*/
                    msgName: 'msg', /*规定状态信息的字段名称，默认：msg*/
                    countName: 'count', /*规定数据总数的字段名称，默认：count*/
                    dataName: 'data', /*规定数据列表的字段名称，默认：data*/
                },
                parseData: function (res) {
                    /*res 即为原始返回的数据*/
                    return {
                        "code": res.code, /*解析接口状态*/
                        "msg": res.message, /*解析提示文本*/
                        "count": res.data.total, /*解析数据长度*/
                        "data": res.data.list /*解析数据列表*/
                    };
                },
                where: {
                    /*接口的其它参数*/
                    searchKey: searchKey,
                },
            }, 'data');
            return false;
        });

        /*监听单元格编辑事件*/
        linksTable.on('edit(currentTableFilter)', function (obj) {
            /*console.log(obj);
            /!*当前修改的tr对象*!/
            console.log(obj.data);
            /!*修改后的值*!/
            console.log(obj.value);
            /!*得到修改的字段名*!/
            console.log(obj.field);*/
            let newObj = obj.data;
            axiosPutFunction('/api/blogLink/authApi/update', newObj, true).then((responseData) => {
                if (responseData) {
                    layer.alert(responseData, {icon: 1, skin: 'layui-layer-molv', closeBtn: 0, anim: 4}, function () {
                        /*location.reload();*/
                        layer.closeAll();
                    });
                }
            }).catch(function (err) {
                layer.alert("修改失败:" + err, function () {
                    location.reload();
                });
            });
        });

        /**
         * toolbar监听事件
         */
        linksTable.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                let index = layer.open({
                    title: '添加友联',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['auto', 'auto'],
                    content: '        <fieldset class="table-search-fieldset">\n' +
                        '            <legend>添加友联</legend>\n' +
                        '            <div style="margin: 10px 10px 10px 10px">\n' +
                        '                <form class="layui-form layui-form-pane" onsubmit="return false">\n' +
                        '                    <div class="layui-form-item">\n' +
                        '                        <div class="layui-inline">\n' +
                        '                            <label class="layui-form-label">友链名称：</label>\n' +
                        '                            <div class="layui-input-inline">\n' +
                        '                                <input type="text" name="linkName" id="linkName" autocomplete="off" class="layui-input">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="layui-inline">\n' +
                        '                            <label class="layui-form-label">友链链接：</label>\n' +
                        '                            <div class="layui-input-inline">\n' +
                        '                                <input type="text" name="linkHref" id="linkHref" autocomplete="off" class="layui-input">\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                        <div class="layui-inline">\n' +
                        '                            <button type="submit" class="layui-btn layui-btn-primary" id="addLink" lay-submit >添加</button>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </form>\n' +
                        '            </div>\n' +
                        '        </fieldset>',
                });
                $('#addLink').click(function () {
                    let linkName = $('#linkName').val();
                    let linkHref = $('#linkHref').val();
                    axiosPostFunction('/api/blogLink/authApi/insert', {
                        "linkName": linkName,
                        "linkHref": linkHref
                    }, true).then((responseData) => {
                        if (responseData) {
                            layer.alert(responseData, {
                                icon: 1,
                                skin: 'layui-layer-molv',
                                closeBtn: 0,
                                anim: 4
                            }, function () {
                                layer.closeAll();
                                location.reload();
                            });
                        }
                    }).catch(function (err) {
                        console.warn(err);
                    });
                });

                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                layer.confirm('真的删除行么', function (index) {
                    let arr = [];
                    let checkStatus = linksTable.checkStatus('currentTableId')
                        , data = checkStatus.data;
                    for (let i in data) {
                        /*console.log(data[i].id)*/
                        arr.push(data[i].id)
                    }
                    console.log(arr);
                    axiosDeleteFunction('/api/blogLink/authApi/batch/delete', arr, true).then((responseData) => {
                        if (responseData) {
                            layer.close(index)
                            layer.alert(responseData, {
                                icon: 1,
                                skin: 'layui-layer-molv',
                                closeBtn: 0,
                                anim: 4
                            }, function () {
                                location.reload();
                            });
                        }
                    }).catch(function (err) {
                        layer.alert("删除失败:" + err);
                    });
                });
            }
        });

        /*监听表格复选框选择*/
        linksTable.on('checkbox(currentTableFilter)', function (obj) {
            /*console.log(obj);*/
        });

        linksTable.on('tool(currentTableFilter)', function (obj) {
            let data = obj.data;
            if (obj.event === 'edit') {
                layer.msg('请点击表格单元格后修改数据', {icon: 6, skin: 'layui-layer-molv', closeBtn: 0});
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('真的删除行么', function (index) {
                    let arr = new Array(1);
                    arr[0] = data.id;
                    axiosDeleteFunction('/api/blogLink/authApi/batch/delete', arr, true).then((responseData) => {
                        if (responseData) {
                            layer.close(index)
                            layer.alert(responseData, {
                                icon: 1,
                                skin: 'layui-layer-molv',
                                closeBtn: 0,
                                anim: 4
                            }, function () {
                                location.reload();
                            });
                        }
                    }).catch(function (err) {
                        layer.alert("删除失败:" + err);
                    });
                });
            }
        });
    });
</script>
<script>

</script>

</body>
</html>
